<template>
    <v-menu
        v-model="select_menu"
        :close-on-content-click="false"
        location="bottom"
        persistent
    >
        <template v-slot:activator="{ props: menu }">
            <v-btn
                variant="text"
                v-bind="menu"
                style="position: absolute; right: 0"
            >
                {{ this.designStore.interActive.interActiveName }}
            </v-btn>
        </template>
        <v-card min-width="320">
            <v-icon
                @click="select_menu = false"
                style="position: absolute; right: 0%"
                >mdi-close</v-icon
            >
            <div style="padding-top: 7%">
                <v-tabs
                    v-model="tab"
                    fixed-tabs
                    color="blue"
                >
                    <v-tab :value="1">Compontents</v-tab>
                    <v-tab :value="2">Interface</v-tab>
                </v-tabs>
                <v-window v-model="tab">
                    <v-window-item
                        v-for="n in 2"
                        :key="n"
                        :value="n"
                    >
                        <v-card min-height="300">
                            <v-text-field
                                density="compact"
                                prepend-inner-icon="mdi-magnify"
                                variant="underlined"
                            ></v-text-field>
                            <v-list
                                density="compact"
                            >
                                <MenuItem
                                    v-for="(children, index) in domList"
                                    :dom="children"
                                    :key="index"
                                ></MenuItem>
                            </v-list>
                        </v-card>
                    </v-window-item>
                </v-window>
            </div>
        </v-card>
    </v-menu>
</template>
<script>
import { useDesignStore } from '../../../../../stores/design'
import MenuItem from './MenuItem.vue'
import { globalDomTree } from '../../../../../stores/design'
export default {
    name: 'TargetMenu',
    components: {
        MenuItem
    },
    data() {
        return {
            domList: globalDomTree.children,
            designStore: useDesignStore(),
            select_menu: false,
            tab: null
        }
    },
    methods: {
        deleteDom() {

        }
    },
    computed: {
        attr() {
            return this.designStore.currentDomPointer.attr
        }
    }
}
</script>
